<template>
  <a-form :model="formState" ref="formDataRef" name="basic" :label-col="{ style: 'width:80px' }" :wrapper-col="{ style: 'calc(100% - 80px)' }" autocomplete="off" @finish="submitHandle">
    <a-form-item label="经营单位" name="companyId" :rules="[{ required: true, message: '请选择经营单位!' }]">
      <a-select v-model:value="formState.companyId" placeholder="请选择">
        <a-select-option v-for="(item, index) in companyOpts" :key="index" :label="item.name" :value="item.id">{{ item.name }}</a-select-option>
      </a-select>
    </a-form-item>
    <a-form-item label="代理商" name="agentId" :rules="[{ required: true, message: '请选择代理商!' }]">
      <a-select v-model:value="formState.agentId" placeholder="请选择">
        <a-select-option v-for="(item, index) in agentOpts" :key="index" :label="item.name" :value="item.id">{{ item.name }}</a-select-option>
      </a-select>
    </a-form-item>
    <a-form-item label="付款账户" name="payAccountId" :rules="[{ required: true, message: '请选择付款账户!' }]">
      <a-cascader v-model:value="formState.payAccountId" :fieldNames="{ label: 'name', value: 'id', children: 'deptAccounts' }" :options="paymentAccountOpts" placeholder="请选择付款账户" />
    </a-form-item>
    <a-form-item label="付款金额" name="payAmount" :rules="[{ required: true, message: '请填写付款金额!' }]">
      <a-input-number v-model:value="formState.payAmount" :min="0.01" :max="999999.99" :precision="2" placeholder="请输入"></a-input-number>
    </a-form-item>
    <a-form-item label="付款时间" name="payTime" :rules="[{ required: true, message: '请填写付款金额!' }]">
      <a-date-picker v-model:value="formState.payTime" show-time placeholder="请选择" />
    </a-form-item>
    <a-form-item label="流水号" name="serialNumber" :rules="[{ required: true, message: '请填写流水号!' }]">
      <a-input v-model:value="formState.serialNumber" @keyup="validateZhInputHandle($event, formState, ['serialNumber'])" placeholder="请输入" :maxlength="30" />
    </a-form-item>
    <a-form-item label="付款备注" name="remark" :rules="[{ required: false, message: '请填写付款备注!' }]">
      <a-textarea v-model:value="formState.remark" placeholder="请输入" show-count :maxlength="200" />
    </a-form-item>
    <a-form-item :wrapper-col="{ offset: 8, span: 16 }" class="submit-btn-form-item">
      <a-button :loading="loading" type="primary" style="margin-right: 16px" html-type="submit">确认</a-button>
      <a-button @click="resetHandle">取消</a-button>
    </a-form-item>
  </a-form>
</template>

<script lang="ts" setup>
import { toRefs, watch } from "vue";
import InitHook from "./composables/initHook";
import OperationHook from "./composables/operationHook";
const props = withDefaults(
  defineProps<{
    visible: boolean;
  }>(),
  {}
);
const emit = defineEmits<{
  (e: "update:visible", blo: boolean): void;
  (e: "submit"): void;
}>();
const { visible } = toRefs(props);
const { formDataRef, formState, loading, getAllCompany, companyOpts, agentOpts, getAllAgent, paymentAccountOpts, getAllPaymentAccount } = InitHook();
const { submitHandle, resetFields, resetHandle, validateZhInputHandle } = OperationHook({ formDataRef, formState, emit, loading });
watch(
  () => visible.value,
  (v: boolean) => {
    if (!v) {
      resetFields();
      formDataRef.value.clearValidate();
    } else {
      getAllCompany();
      getAllAgent();
      getAllPaymentAccount();
    }
  }
);
getAllCompany();
getAllAgent();
getAllPaymentAccount();
</script>
<style lang="stylus" scoped>
:deep(.ant-input-number),:deep(.ant-picker){
    width: 100%;
}
</style>
